/**
 * List Component Demo for tingle
 * @author muxin
 *
 * Copyright 2014-2016, Tingle Team.
 * All rights reserved.
 */

// tingle-style's utils
@require '../../src/Style/tingle'
@require '../../src/Group/Group'
@require '../../src/List/List'

body
    background-color #f2f2f2
.t-demo-title
    font-size : 16px
    height : 30px
    line-height : 30px
    padding-left : 10px
.demo-t-list-wrap
    padding : 10px
.demo-t-list-wrap-single
    display : block
    padding : 8px 10px
.demo-t-list-img
    width : 28px
    height : 28px
    border-radius : 50%
    margin-right : 10px
    margin-left : 5px
.demo-t-list-text-content
    margin-right : 10px
.demo-t-list-text-content-single
    line-height : 28px
.demo-t-list-title
    color : #222
    font-size : 16px
    line-height : 22px
    padding-bottom : 4px
.demo-t-list-title-single
    font-size : 17px
    color : #222
    padding-bottom : 0
.demo-t-list-text
    color : #999
    font-size : 12px
    line-height : 18px
    padding-bottom : 4px
.demo-t-list-time
    color : #999
    font-size : 12px
.demo-t-list-title-tag
    display: inline-block;
    background: #ccc;
    color: #fff;
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 3px;
    margin-left: 5px;
.demo-t-list-img-right
    -webkit-flex-direction : row-reverse
    flex-direction : row-reverse

.demo2-t-list-wrap
    padding-top : 10px
    background : #f4f4f4
.demo2-t-list-title
    background : #fff
    height : 30px
    line-height : 30px
    padding-left : 15px
    padding-right : 12px
    -webkit-justify-content : space-between
    justify-content: space-between
.demo2-t-list-title-content
    color : #222
    font-size : 15px
.demo2-t-list-time
    color : #999
    margin-left : 5px
.demo2-t-list-img-wrap
    width : 100%
    height : 5rem
.demo2-t-list-img
    width : 100%
    height : 5rem

.demo3-t-list-wrap
    padding : 10px
.demo3-t-list-img
    width : 60px
    height : 60px
    border-radius : 4px
    margin-right : 10px
.demo3-t-list-title
    color : #222
    font-size : 14px
    line-height : 20px
.demo3-t-list-text
    color : #999
    font-size : 12px
    line-height : 18px
.demo3-t-list-time
    color : #666
    font-size : 12px
    line-height : 18px
.demo3-t-list-cricle
    display : block
    width : 8px
    height : 8px
    border-radius : 50%
    background : #f04631
    float : right

